<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script src="../js/back/login.js"></script>
</head>
<style>
    *{
        margin: 0;
        border: 0;
    }
    body{
        background-image: url("../img/bg.jpg");
        background-size: 100% 100vh;
    }
    .content{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .content>div{
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 80vh;
        justify-content: center;
        align-items: center;
        border: 1px solid red;
    }
    .content>div>div{
        display: flex;
    }
</style>
<body>
<div class="content">
    <div>
        <div id="head"><img src="../img/timg.jpg"></div>
        <div>
            <div>用户名</div>
            <div><input type="text" id="username" pattern="^[a-zA-Z]\w{5,15}$"></div>
        </div>
        <div>
            <div>密码</div>
            <div><input type="password" id="password" pattern="^[a-zA-Z]\w{5,15}$"></div>
        </div>
        <div>
            <div>验证码</div>
            <div><input type="text" id="codeipt" name="code" pattern="[a-zA-z]/d{4}"><img id="codeimg" src="/code" onclick="flushCode()" ></div>
        </div>
        <div id="tips" style='color: red'></div>
        <div>
            <div><input type="button" value="登录" onclick="login()"></div>
            <div><input type="button" value="注册" onclick="window.location.href='/register'"></div>
        </div>
    </div>
</div>
</body>
</html>